<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Padding - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    为尽量避免使用行内css，所以添加了常用的padding工具；并提供了适用于<code>desktop</code>、<code>tablet</code>、<code>tablet-and-mobile</code>、<code>mobile</code>设备下的工具;
                </div>
            </div>
        </div>
    </div>
    <form class="e-form">
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        padding
                    </h3>
                </div>
            </div>
            <div class="card-body">
                <div class="alert alert-secondary fade show" role="alert">
                    <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                    <div class="alert-text">
                        <code>*</code>可以为<code>0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50</code>中任意数字
                    </div>
                </div>

                <table class="table">
                    <thead>
                    <tr>
                        <th>class</th>
                        <th>style</th>
                        <th>media</th>
                        <th>说明</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>e-padding-*</code></td>
                        <td><code>padding: *px !important;</code></td>
                        <td>-</td>
                        <td>eg：<code>e-padding-0</code>、<code>e-padding-15</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-t-*</code></td>
                        <td><code>padding-top: *px !important;</code></td>
                        <td>-</td>
                        <td>eg：<code>e-padding-t-0</code>、<code>e-padding-t-15</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-r-*</code></td>
                        <td><code>padding-right: *px !important;</code></td>
                        <td>-</td>
                        <td>eg：<code>e-padding-r-0</code>、<code>e-padding-r-15</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-b-*</code></td>
                        <td><code>padding-bottom: *px !important;</code></td>
                        <td>-</td>
                        <td>eg：<code>e-padding-b-0</code>、<code>e-padding-b-15</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-l-*</code></td>
                        <td><code>padding-left: *px !important;</code></td>
                        <td>-</td>
                        <td>eg：<code>e-padding-l-0</code>、<code>e-padding-l-15</code></td>
                    </tr>

                    <tr><td colspan="4"></td></tr>

                    <tr>
                        <td><code>e-padding-*-desktop</code></td>
                        <td><code>padding: *px !important;</code></td>
                        <td>desktop</td>
                        <td>eg：<code>e-padding-0-desktop</code>、<code>e-padding-15-desktop</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-t-*-desktop</code></td>
                        <td><code>padding-top: *px !important;</code></td>
                        <td>desktop</td>
                        <td>eg：<code>e-padding-t-0-desktop</code>、<code>e-padding-t-15-desktop</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-r-*-desktop</code></td>
                        <td><code>padding-right: *px !important;</code></td>
                        <td>desktop</td>
                        <td>eg：<code>e-padding-r-0-desktop</code>、<code>e-padding-r-15-desktop</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-b-*-desktop</code></td>
                        <td><code>padding-bottom: *px !important;</code></td>
                        <td>desktop</td>
                        <td>eg：<code>e-padding-b-0-desktop</code>、<code>e-padding-b-15-desktop</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-l-*-desktop</code></td>
                        <td><code>padding-left: *px !important;</code></td>
                        <td>desktop</td>
                        <td>eg：<code>e-padding-l-0-desktop</code>、<code>e-padding-l-15-desktop</code></td>
                    </tr>

                    <tr><td colspan="4"></td></tr>

                    <tr>
                        <td><code>e-padding-*-tablet</code></td>
                        <td><code>padding: *px !important;</code></td>
                        <td>tablet</td>
                        <td>eg：<code>e-padding-0-tablet</code>、<code>e-padding-15-tablet</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-t-*-tablet</code></td>
                        <td><code>padding-top: *px !important;</code></td>
                        <td>tablet</td>
                        <td>eg：<code>e-padding-t-0-tablet</code>、<code>e-padding-t-15-tablet</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-r-*-tablet</code></td>
                        <td><code>padding-right: *px !important;</code></td>
                        <td>tablet</td>
                        <td>eg：<code>e-padding-r-0-tablet</code>、<code>e-padding-r-15-tablet</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-b-*-tablet</code></td>
                        <td><code>padding-bottom: *px !important;</code></td>
                        <td>tablet</td>
                        <td>eg：<code>e-padding-b-0-tablet</code>、<code>e-padding-b-15-tablet</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-l-*-tablet</code></td>
                        <td><code>padding-left: *px !important;</code></td>
                        <td>tablet</td>
                        <td>eg：<code>e-padding-l-0-tablet</code>、<code>e-padding-l-15-tablet</code></td>
                    </tr>

                    <tr><td colspan="4"></td></tr>

                    <tr>
                        <td><code>e-padding-*-tablet-and-mobile</code></td>
                        <td><code>padding: *px !important;</code></td>
                        <td>tablet 和 mobile</td>
                        <td>eg：<code>e-padding-0-tablet-and-mobile</code>、<code>e-padding-15-tablet-and-mobile</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-t-*-tablet-and-mobile</code></td>
                        <td><code>padding-top: *px !important;</code></td>
                        <td>tablet 和 mobile</td>
                        <td>eg：<code>e-padding-t-0-tablet-and-mobile</code>、<code>e-padding-t-15-tablet-and-mobile</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-r-*-tablet-and-mobile</code></td>
                        <td><code>padding-right: *px !important;</code></td>
                        <td>tablet 和 mobile</td>
                        <td>eg：<code>e-padding-r-0-tablet-and-mobile</code>、<code>e-padding-r-15-tablet-and-mobile</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-b-*-tablet-and-mobile</code></td>
                        <td><code>padding-bottom: *px !important;</code></td>
                        <td>tablet 和 mobile</td>
                        <td>eg：<code>e-padding-b-0-tablet-and-mobile</code>、<code>e-padding-b-15-tablet-and-mobile</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-l-*-tablet-and-mobile</code></td>
                        <td><code>padding-left: *px !important;</code></td>
                        <td>tablet 和 mobile</td>
                        <td>eg：<code>e-padding-l-0-tablet-and-mobile</code>、<code>e-padding-l-15-tablet-and-mobile</code></td>
                    </tr>

                    <tr><td colspan="4"></td></tr>

                    <tr>
                        <td><code>e-padding-*-mobile</code></td>
                        <td><code>padding: *px !important;</code></td>
                        <td>mobile</td>
                        <td>eg：<code>e-padding-0-mobile</code>、<code>e-padding-15-mobile</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-t-*-mobile</code></td>
                        <td><code>padding-top: *px !important;</code></td>
                        <td>mobile</td>
                        <td>eg：<code>e-padding-t-0-mobile</code>、<code>e-padding-t-15-mobile</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-r-*-mobile</code></td>
                        <td><code>padding-right: *px !important;</code></td>
                        <td>mobile</td>
                        <td>eg：<code>e-padding-r-0-mobile</code>、<code>e-padding-r-15-mobile</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-b-*-mobile</code></td>
                        <td><code>padding-bottom: *px !important;</code></td>
                        <td>mobile</td>
                        <td>eg：<code>e-padding-b-0-mobile</code>、<code>e-padding-b-15-mobile</code></td>
                    </tr>
                    <tr>
                        <td><code>e-padding-l-*-mobile</code></td>
                        <td><code>padding-left: *px !important;</code></td>
                        <td>mobile</td>
                        <td>eg：<code>e-padding-l-0-mobile</code>、<code>e-padding-l-15-mobile</code></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </form>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>